<template>
	<view class="container">
		<view class="content">
			<view class="content-back-groud">
				<image style="width: 100%; height: 100%; object-fit: cover"
					src="https://www.taotaohomecraft.press/prod-api/profile/background.jpg"></image>
			</view>
			<view class="content-item" @tap="goMap">
				<u-icon name="map" color="green" size="28"></u-icon>
				<text style="margin-left: 3%; font-size: 15px">{{ address }}</text>
			</view>
			<view class="content-item" @click="freeTell">
				<u-icon name="phone" color="green" size="28"></u-icon>
				<text style="margin-left: 3%; font-size: 15px">联系电话：{{ phoneNumber }}</text>
			</view>
			<view class="contentInt-roduction" style="margin-top: 5">
				<u-cell-group>
					<u-cell title="小店介绍" :border="false"></u-cell>
				</u-cell-group>
			</view>
			<view class="contentInt-roduction" style="margin-bottom: 10%">
				<u-read-more>
					<view class="formatted-content" style="color: black">
						{{ formattedContent }}
					</view>
				</u-read-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: '18697355127',
				latitude: '34.190117000000015', //纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系
				longitude: '113.80852200000004', //	经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系
				storeName: '淘淘家', //这块市你坐标值的目的地 名字也可以自定义
				address: '河南省许昌市长葛市和尚桥镇森源路与黄杰路交叉口向北100米路西', //这块市地址的详细描述可以自定义
				content: [
					'淘淘家图书馆，位于长葛市东区黄杰路恒达和园楼下，目前藏书4000余册，是东区唯一一家借阅式图书馆，致力于推广全民阅读，营造浓厚的书香氛围,图书馆以便利的地理位置和温馨的阅读环境，成为孩子们探索知识的乐园，也是社区居民充电放松的理想空间',
					'　 目前藏书4000余册，是东区唯一一家借阅式图书馆，致力于推广全民阅读',
					'　 馆内环境明亮整洁，设有舒适的阅览区、亲子共读角及静音自习区',
					'　 馆藏涵盖儿童绘本、青少年读物、经典文学、科普百科等多元类目，提供会员专属的每月书籍更新权益'
				].join('。') + '。'
			};
		},
		computed: {
			formattedContent() {
				return this.content.replace(/。/g, '。\n\n');
			}
		},
		methods: {
			goMap() {
				console.log('走了吗');
				uni.openLocation({
					latitude: Number(this.latitude), //维度
					longitude: Number(this.longitude), //经度
					scale: 18, //缩放比例，范围5~18，默认为18
					name: this.storeName, //地址名称
					address: this.address //地址详情
				});
			},
			freeTell() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber, //仅为示例，并非真实的电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(e) {
						console.log('拨打电话失败！');
						console.log(e);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content-back-groud {
		position: relative;
		width: 100%;
		height: 30%;
		margin-bottom: 5%;
		overflow: hidden;
	}

	.content-item {
		width: 93%;
		height: 7%;
		display: flex;
		align-items: center;
		justify-content: self-start;
		background-color: #ffffff;
	}

	.contentInt-roduction {
		width: 93%;
		display: flex;
		justify-content: self-start;
		flex-direction: column;
		background-color: #ffffff;
	}

	.formatted-content {
		white-space: pre-line;
		line-height: 1.5;
		text-indent: 2em;
		/* 添加首行缩进 */
	}
</style>